<template>
	<view class="main-cont">
		<!-- <view class="top box box-align-center box-pack-between">
			<view class="box box-align-center">
				<view class="icon mr10"></view>
				班级统计
			</view>

			<view class="" style="color: #7F84E4;font-size: 26rpx;">
				最新更新
			</view>
		</view>
		<view class="chart">
			<view class="charts-box">
				<mpvue-echarts id="main" ref="mapChart" @onInit="renderLine" />
			</view>
		</view> -->

		<view class="list box box-align-center box-pack-between" @click="goClass">
			<view class="box box-align-center">
				<u-image src="/static/class/icon_sort.png" width="73rpx" height="73rpx"></u-image>
				<view class="ml5" style="font-size: 30rpx;font-weight: bold;">
					班级排名
				</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<!-- 		<view class="list box box-align-center box-pack-between" @click="goZs">
			<view class="box box-align-center">
				<u-image src="/static/class/icon_zs1.png" width="73rpx" height="73rpx"></u-image>
				<view class="ml5" style="font-size: 30rpx;font-weight: bold;">
					学生证书
				</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view> -->
	</view>
</template>

<script>
	import * as echarts from './echart/echarts.min.js'
	import mpvueEcharts from './mpvue-echarts/src/echarts.vue'
	export default {
		components: {
			mpvueEcharts
		},
		data() {
			return {
				user: uni.getStorageSync("user"),
				chartData: {
					categories: [],
					series: [],
				},
			}
		},
		onLoad() {
			this.trXqbg();
		},
		onReady() {
		},
		methods: {
			renderLine(e) {
				let {
					canvas,
					width,
					height
				} = e;
				echarts.setCanvasCreator(() => canvas);
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(chart);
				var option = {
					legend: {},
					tooltip: {},
					dataset: {
						source: [
							['product', '2012', '2013', '2014', '2015'],
							['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
							['Milk Tea', 86.5, 92.1, 85.7, 83.1],
							['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
						]
					},
					xAxis: [{
							type: 'category',
							gridIndex: 0
						},
						{
							type: 'category',
							gridIndex: 1
						}
					],
					yAxis: [{
						gridIndex: 0
					}, {
						gridIndex: 1
					}],
					grid: [{
						bottom: '55%'
					}, {
						top: '55%'
					}],
					series: [
						// These series are in the first grid.
						{
							type: 'bar',
							seriesLayoutBy: 'row'
						},
						{
							type: 'bar',
							seriesLayoutBy: 'row'
						},
						{
							type: 'bar',
							seriesLayoutBy: 'row'
						},
						// These series are in the second grid.
						{
							type: 'bar',
							xAxisIndex: 1,
							yAxisIndex: 1
						},
						{
							type: 'bar',
							xAxisIndex: 1,
							yAxisIndex: 1
						},
						{
							type: 'bar',
							xAxisIndex: 1,
							yAxisIndex: 1
						},
						{
							type: 'bar',
							xAxisIndex: 1,
							yAxisIndex: 1
						}
					]
				};

				chart.setOption(option);
			},
			trXqbg() {
				let opts = {
					url: '/dclass/trXqbg',
					method: 'post'
				};
				let params = {
					trid: this.user.id,
					schoolid: this.user.schoolId,
				};
				//console.log(params)
				this.$api.post(opts, params).then(res => {
					this.chartData.categories = res.categories;
					this.chartData.series = res.series;
				})
			},
			goClass() {
				uni.navigateTo({
					url: "/trPageMy/classSort"
				})
			},
			goZs() {
				uni.navigateTo({
					url: "/trPageMy/classSort"
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */

	.chart {
		width: 100%;
		height: 672rpx;
		background-color: #fff;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.top {
		padding: 0 40rpx;
		height: 98rpx;
		border-bottom: 2rpx solid #F0F1F8;
		background-color: #fff;
	}

	.icon {
		width: 7rpx;
		height: 28rpx;
		background: #626BF1;
		border-radius: 4rpx;
	}

	.list {
		padding: 0 47rpx 0 26rpx;
		margin: 34rpx 14rpx;
		width: 722rpx;
		height: 126rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
</style>
